<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    <title>传说中的上传功能</title>
    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
    <link rel="stylesheet" href="/static/css/global.css">

    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap-theme.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">

    <script src="https://cdn.bootcss.com/jquery/3.4.1/core.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>

    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/npm.js"></script>

    <script src="https://cdn.bootcss.com/socket.io/2.3.0/socket.io.js"></script>
</head>

<body>
    <table class="table table-striped table-hover table-bordered" id="devtable">

    </table>

    <a href="/home" class="btn btn-success">返回主页</a>


</body>
<script>

    const socket = io();

    socket.on('connect', function () {
        socket.emit('first_connection', { 'device name': 'upload page', });
    });

    socket.on('device change', function (msg) {
        console.log(msg);
        window.location.reload();
    });

    window.onbeforeunload = function () {
        socket.disconnect();
    };

    var x;//article_id
    var y;

    function getUrlVars() {
        var vars = [], hash;
        var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
        for (var i = 0; i < hashes.length; i++) {
            hash = hashes[i].split('=');
            vars.push(hash[0]);
            vars[hash[0]] = hash[1];
        }
        return vars;
    }

    $(document).ready(function () {
        x = getUrlVars()["id"];
        y = getUrlVars()["title"];
        $("#get").click();
        $("#play").on("click", function () {

            var ppttime = prompt("请输入放映延时");
            alert(ppttime);
            //document.write(name);
            var int = self.setInterval("clock()", ppttime);

        });

    });
    // const URL = 'http://172.20.34.120:5000';
    const URL = '';
    var rcvdata;
    $.ajaxSetup({ async: false });
    var username;

    function query_username() {
        $.ajax({
            type: 'post',
            url: URL + '/json/username',
            data: username,
            contentType: false,
            processData: false,
            xhrFields: { withCredentials: true },
            crossDomain: true,
            success: function (data) {
                console.log(data);
            },
        });
    };
    query_username();

    function query_onlineDevice() {
        $.ajax({
            type: 'post',
            url: URL + '/json/online_device_list',
            data: rcvdata,
            contentType: false,
            processData: false,
            xhrFields: { withCredentials: true },
            crossDomain: true,
            success: function (data) {
                rcvdata = data;
            },
        });
    };
    query_onlineDevice();

    function upload(device_name, device_id) {
        var formdata = new FormData();
        var ppttime = prompt("请输入放映延时");
        formdata.append('device name', device_name);
        $.ajax({
            type: 'post',
            url: URL + '/json/content_upload?device_id=' + device_id + '&art_id=' + x + '&art_title=' + y + '&time=' + ppttime,
            data: formdata,
            processData: false,
            contentType: false,
            xhrFields: { withCredentials: true },
            crossDomain: true,
            success: function (msg) {
                console.log(msg);
                if (msg == 'success') {
                    window.location.replace('/home');
                } else {
                    location.reload();
                }
            },
            error: function () {
                console.log('fuck!!!!!!!!!!');
            },
        });
    }

    for (var i = 0; i < rcvdata.length; ++i) {
        var newhtml = '<thead><tr><th>设备名称</th><th>设备ID</th><th>操作</th></tr></thead><tbody><tr><td>' + rcvdata[String(i)]["id"] + '</td><td>' + rcvdata[String(i)]["name"] + '</td><td><button class="btn btn-primary btn_upload" id=' + String(i) + '>上传</button></td></tr></tbody>';
        $("#devtable").append(newhtml);
    }

    $(".btn_upload").on("click", function () {
        upload(rcvdata[this.id]["name"], rcvdata[this.id]["id"]);
        return false;
    });
</script>

</html>